<template>
    <div @click.stop="() => {}">
        <a-popover v-if="!conditionData.filterColumnName" trigger="click" :arrow-point-at-center="false">
            <a-button type="link" class="button-tips">
                {{ t('tips.selectField') }}
            </a-button>

            <template #content>
                <field-select-tree class="field-selector" :field-list="fieldList" @selectField="handleSelectField" />
            </template>
        </a-popover>

        <div v-else class="condition-block">
            <!-- 条件过滤的字段名称 -->
            <div class="condition-field condition-config-item" @click="handleSelectCondition">
                {{ currentFieldInfo.title ? currentFieldInfo.title : currentFieldInfo.label }}
            </div>
            <!-- 条件过滤的过滤类型 -->
            <a-select
                v-model:value="conditionData.conditionType"
                class="condition-type condition-config-item"
                @change="handleConditionTypeChange"
            >
                <a-select-option
                    v-for="(optionText, optionValue) in conditionTypeOptions"
                    :key="optionValue"
                    :value="optionValue"
                >
                    {{ optionText }}
                </a-select-option>
            </a-select>

            <!-- 条件过滤的内容 -->
            <condition-form
                class="condition-config-item"
                :column-info="currentFieldInfo"
                :condition-data="conditionData"
            />
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, watch, computed } from 'vue'
    import { useI18n } from 'vue-i18n'
    import ConditionForm from './conditionForm.vue'
    import {
        getComponentDefaultValue,
        convertRawDataTypeToItdType,
        filterConditionTypeMap
    } from './conditionFormConfig'
    import FieldSelectTree from './fieldSelectTree.vue'

    interface conditionData {
        filterColumnName: string
        type?: string
        conditionType: string
        value: any
    }

    interface fieldInfo {
        filterColumnName: string
        [key: string]: any
    }

    export default defineComponent({
        components: {
            ConditionForm,
            FieldSelectTree
        },
        props: {
            // 配置文件
            conditionConfig: {
                type: Object,
                default: () => ({})
            },
            /**
             * 需要传入的数据
             */
            fieldList: {
                type: Array,
                default: () => []
            }
        },
        emits: ['selectCondition'],
        setup(props, { emit }) {
            const { t } = useI18n()

            const conditionData = ref<conditionData>({
                filterColumnName: '',
                type: '',
                conditionType: '',
                value: null
            })

            /**
             * 整理数据格式
             * 数组转对象 以item.filterColumnName为key
             */
            const fieldMap = computed(() => {
                const fieldMap = {}
                props.fieldList.forEach(item => {
                    fieldMap[(item as fieldInfo).filterColumnName] = item
                })
                return fieldMap
            })

            /**
             * 当前字段的信息
             */
            const currentFieldInfo = computed(() => {
                const { filterColumnName } = conditionData.value || {}
                if (!filterColumnName) {
                    return {}
                }
                return fieldMap.value[filterColumnName] || {}
            })

            const conditionTypeOptions = computed(() => {
                if (!currentFieldInfo.value.type) {
                    return {}
                }
                const itdType = convertRawDataTypeToItdType(currentFieldInfo.value.type)
                return filterConditionTypeMap[itdType]
            })

            watch(
                () => props.conditionConfig,
                () => {
                    conditionData.value = (props.conditionConfig as conditionData) || {
                        filterColumnName: '',
                        type: '',
                        conditionType: '',
                        value: null
                    }
                },
                {
                    immediate: true,
                    deep: true
                }
            )

            /**
             * 点击字段标题暴露后暴露给父组件
             */
            function handleSelectCondition() {
                emit('selectCondition')
            }

            /**
             * 字段选择后更新数据, 显示可选条件选择框
             */
            function handleSelectField(fieldInfo) {
                const { filedId, type } = fieldInfo
                conditionData.value.filterColumnName = filedId
                conditionData.value.type = type
            }

            /**
             * 组件条件发生变化的回调
             */
            function handleConditionTypeChange() {
                const { type } = currentFieldInfo.value
                const { conditionType } = conditionData.value
                conditionData.value.value = getComponentDefaultValue(type, conditionType)
            }

            return {
                conditionData,
                currentFieldInfo,
                conditionTypeOptions,

                t,
                handleSelectCondition,
                handleConditionTypeChange,
                handleSelectField
            }
        }
    })
</script>

<style lang="less" scoped>
    @gutter: 15px;

    .button-tips {
        height: 16px;
    }

    .field-selector {
        height: 300px;
        overflow: auto;
    }

    .condition-block {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: -@gutter;

        .condition-config-item {
            margin-top: @gutter;
        }
    }

    .condition-field {
        margin-left: @gutter;
        width: 100px;
        cursor: pointer;
    }

    .condition-type {
        margin: 0 @gutter;
        width: 150px;
    }
</style>

<i18n>
zh-CN:
  tips:
    selectField: '请选择字段'
</i18n>
